<template lang="">
  <div>
    <footer class="footer">
      <span class="todo-count">
        剩余未完成 : <strong>{{ remainNum }}</strong>
      </span>

      <ul class="filters">
        <li>
          <a
            :class="{ selected: condition === 'all' }"
            @click="changeCondition('all')"
            href="#/"
            >所有进程</a
          >
        </li>
        <li>
          <a
            :class="{ selected: condition === 'active' }"
            @click="changeCondition('active')"
            href="#/active"
            >进程进行中</a
          >
        </li>
        <li>
          <a
            :class="{ selected: condition === 'completed' }"
            @click="changeCondition('completed')"
            href="#/completed"
            >进程已完成</a
          >
        </li>
      </ul>
      <button class="clear-completed" @click="clearAll">清除已完成</button>
    </footer>
  </div>
</template>
<script>
export default {
  props: ["list", "condition"],
  methods: {
    // 清除已完成
    clearAll() {
      this.$emit("clear");
    },
    
    changeCondition(type) {
      console.log(type);
      this.$emit("onCondition", type);
    },
  },
  computed: {
    // 剩余未完成
    remainNum() {
      return this.list.filter((v) => v.done === false).length;
    },
  },
};
</script>
<style lang=""></style>
